<template>
  <div class="main">
    <section>
      <el-form :model="form" size="medium" ref="form" label-width="120px">
        <el-form-item label="分类名称:" prop="name" :rules="commonRules.notNullRule">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item v-if="form.parentId" label="分类商品排序:" prop="goodsOrderBy">
          <el-select v-model="form.goodsSortType">
            <el-option label="按销量倒排" :value="1"></el-option>
            <el-option label="按上架时间倒排" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上级分类:">
          <span v-text="form.parentId ? form.parentName : '顶级分类'"></span>
        </el-form-item>
        <el-form-item label="排序:">
          <el-input type="number" v-model="form.sort"></el-input>
        </el-form-item>
        <el-form-item label="ICON:" prop="smallPic" :rules="commonRules.notNullRule">
          <!-- <MyUpload v-model="form.smallPic" /> -->
          <el-upload
            class="avatar-uploader"
            :action="upladUrl"
            name="file"
            :show-file-list="false"
            :before-upload="beforeUpload"
            :on-success="uploadSmallPicSuccess"
          >
            <img v-if="form.smallPic" :src="form.smallPic" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="banner:" prop="banner" :rules="commonRules.notNullRule">
          <!-- <MyUpload v-model="form.banner" />/ -->
           <el-upload
            class="avatar-uploader"
            :action="upladUrl"
            name="file"
            :show-file-list="false"
            :before-upload="beforeUpload"
            :on-success="uploadBannerSuccess"
          >
            <img v-if="form.banner" :src="form.banner" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="是否可用:">
          <el-switch v-model="form.enableStatus" active-color="#13ce66" inactive-color="#ff4949" :active-value="1" :inactive-value="0">
          </el-switch>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="loading" @click="submit">保存</el-button>
        </el-form-item>
      </el-form>
    </section>
  </div>
</template>

<script>
import MyUpload from '@/components/Upload/myUpload'
import { addFrontCat, updateFrontCat } from '@/api/goodMiddleStage'
export default {
  name: 'catEdit',
  components: {
    MyUpload
  },
  data() {
    return {
      loading: false,
      form: {
        banner: '',
        description: '',
        enableStatus: 0,
        goodsSortType: 1, // 1 按销量倒排， 2 按上架时间倒排
        name: '',
        parentId: 0,
        smallPic: '',
        sort: 0
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.form = { ...this.form, ...this.$route.query }
      console.log(this.$route.query)
    },
    submit() {
      this.$refs['form'].validate(async valid => {
        this.loading = true
        if (valid) {
          try {
            let data = null
            if (this.$route.name === 'goodsMiddleStage-categoryAdd') {
              data = await addFrontCat(this.form)
            } else {
              data = await updateFrontCat(this.form)
            }
            this.loading = true
            this.$message.success('操作成功')
            this.$router.push({ path: '/goodsMiddleStage/categoryManage' })
          } catch (error) {
            console.log(error)
            console.log(this.form)
            this.$message.error('操作失败')
          }
        } else {
          return false
        }
      })
    },
    uploadBannerSuccess(res){
       this.$set(this.form, 'banner', res.filePath)
    },
    uploadSmallPicSuccess(res){
      this.$set(this.form, 'smallPic', res.filePath)
    }
  }
}
</script>

<style lang="scss">
.avatar-uploader {
  width: 148px;
  height: 148px;
  /deep/ .el-upload {
    width: 100%;
    height: 100%;
    line-height: 148px;
  }
  .avatar {
    width: 100%;
    height: 100%;
  }
}
</style>
